<template>
  <div class="delivery-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-left">
        <h2>发货管理</h2>
        <p class="subtitle">管理待发货订单和发货记录</p>
      </div>
      <div class="header-right">
        <a-button type="primary" @click="handleBatchDelivery">
          <template #icon><icon-send /></template>
          批量发货
        </a-button>
      </div>
    </div>

    <!-- 发货管理表格 -->
    <a-card :bordered="false">
      <!-- 搜索表单 -->
      <a-form :model="searchForm" layout="inline" class="search-form">
        <a-form-item field="orderNo" label="订单编号">
          <a-input
            v-model="searchForm.orderNo"
            placeholder="请输入订单编号"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="dateRange" label="下单时间">
          <a-range-picker v-model="searchForm.dateRange" />
        </a-form-item>
        <a-form-item field="expressCompany" label="快递公司">
          <a-select
            v-model="searchForm.expressCompany"
            placeholder="请选择快递公司"
            allow-clear
          >
            <a-option value="SF">顺丰速运</a-option>
            <a-option value="YTO">圆通速递</a-option>
            <a-option value="ZTO">中通快递</a-option>
            <a-option value="YD">韵达快递</a-option>
            <a-option value="EMS">EMS</a-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">
              <template #icon><icon-search /></template>
              搜索
            </a-button>
            <a-button @click="handleReset">
              <template #icon><icon-refresh /></template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <!-- 表格工具栏 -->
      <div class="table-toolbar">
        <a-space>
          <a-button type="primary" status="success" @click="handleExport">
            <template #icon><icon-download /></template>
            导出发货单
          </a-button>
          <a-button type="primary" status="warning" @click="handleBatchPrint">
            <template #icon><icon-printer /></template>
            批量打印
          </a-button>
        </a-space>
      </div>

      <!-- 订单表格 -->
      <a-table
        :loading="loading"
        :data="orderList"
        :pagination="pagination"
        :row-selection="rowSelection"
        @page-change="handlePageChange"
      >
        <template #columns>
          <a-table-column title="订单编号" data-index="orderNo" />
          <a-table-column title="商品信息" data-index="productInfo">
            <template #cell="{ record }">
              <div class="product-info">
                <a-avatar :size="40" :src="record.productImage" />
                <div class="product-detail">
                  <div class="product-name">{{ record.productName }}</div>
                  <div class="product-specs">{{ record.productSpecs }}</div>
                </div>
              </div>
            </template>
          </a-table-column>
          <a-table-column title="收货信息" data-index="receiver">
            <template #cell="{ record }">
              <div class="receiver-info">
                <div class="name">{{ record.receiverName }}</div>
                <div class="phone">{{ record.receiverPhone }}</div>
                <div class="address">{{ record.receiverAddress }}</div>
              </div>
            </template>
          </a-table-column>
          <a-table-column title="下单时间" data-index="createTime" />
          <a-table-column title="操作" width="180">
            <template #cell="{ record }">
              <a-space>
                <a-button
                  type="primary"
                  size="small"
                  @click="handleDelivery(record)"
                >
                  发货
                </a-button>
                <a-button
                  type="text"
                  size="small"
                  @click="handleDetail(record)"
                >
                  查看详情
                </a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>

    <!-- 发货弹窗 -->
    <a-modal
      v-model:visible="deliveryVisible"
      :title="isMultiple ? '批量发货' : '订单发货'"
      @ok="handleDeliveryConfirm"
      @cancel="deliveryVisible = false"
    >
      <a-form :model="deliveryForm" layout="vertical">
        <a-form-item field="expressCompany" label="快递公司">
          <a-select
            v-model="deliveryForm.expressCompany"
            placeholder="请选择快递公司"
          >
            <a-option value="SF">顺丰速运</a-option>
            <a-option value="YTO">圆通速递</a-option>
            <a-option value="ZTO">中通快递</a-option>
            <a-option value="YD">韵达快递</a-option>
            <a-option value="EMS">EMS</a-option>
          </a-select>
        </a-form-item>
        <template v-if="!isMultiple">
          <a-form-item field="expressNo" label="快递单号">
            <a-input
              v-model="deliveryForm.expressNo"
              placeholder="请输入快递单号"
            />
          </a-form-item>
        </template>
        <template v-else>
          <a-form-item field="expressNos" label="快递单号">
            <a-textarea
              v-model="deliveryForm.expressNos"
              :rows="4"
              placeholder="请输入快递单号，每行一个，顺序需与选中订单一致"
            />
          </a-form-item>
        </template>
        <a-form-item field="remark" label="备注">
          <a-textarea
            v-model="deliveryForm.remark"
            placeholder="请输入备注信息"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { Message } from "@arco-design/web-vue";
import { useRouter } from "vue-router";
import {
  IconSend,
  IconSearch,
  IconRefresh,
  IconDownload,
  IconPrinter,
} from "@arco-design/web-vue/es/icon";

const router = useRouter();
const loading = ref(false);
const deliveryVisible = ref(false);
const isMultiple = ref(false);
const selectedRows = ref([]);

// 搜索表单
const searchForm = reactive({
  orderNo: "",
  dateRange: [],
  expressCompany: null,
});

// 发货表单
const deliveryForm = reactive({
  expressCompany: "",
  expressNo: "",
  expressNos: "",
  remark: "",
});

// 表格数据
const orderList = ref([
  {
    id: 1,
    orderNo: "SO2024031500001",
    productImage: "https://example.com/image1.jpg",
    productName: "特色桂花糕",
    productSpecs: "规格：500g/盒",
    receiverName: "张三",
    receiverPhone: "138****8888",
    receiverAddress: "广西贵港市港北区",
    createTime: "2024-03-15 12:34:56",
  },
  // 更多订单数据...
]);

// 分页配置
const pagination = reactive({
  total: 100,
  current: 1,
  pageSize: 10,
  showTotal: true,
  showJumper: true,
});

// 表格选择配置
const rowSelection = {
  type: "checkbox",
  showCheckedAll: true,
  onSelect: (selected, record, selectedRows) => {
    selectedRows.value = selectedRows;
  },
  onSelectAll: (selected, selectedRows) => {
    selectedRows.value = selectedRows;
  },
};

// 处理搜索
const handleSearch = () => {
  loading.value = true;
  // TODO: 调用搜索API
  setTimeout(() => {
    loading.value = false;
    Message.success("搜索成功");
  }, 1000);
};

// 处理重置
const handleReset = () => {
  searchForm.orderNo = "";
  searchForm.dateRange = [];
  searchForm.expressCompany = null;
  handleSearch();
};

// 处理分页
const handlePageChange = (page) => {
  pagination.current = page;
  handleSearch();
};

// 导出发货单
const handleExport = () => {
  Message.success("开始导出发货单");
};

// 批量打印
const handleBatchPrint = () => {
  if (selectedRows.value.length === 0) {
    Message.warning("请先选择要打印的订单");
    return;
  }
  Message.success("开始批量打印");
};

// 批量发货
const handleBatchDelivery = () => {
  if (selectedRows.value.length === 0) {
    Message.warning("请先选择要发货的订单");
    return;
  }
  isMultiple.value = true;
  deliveryVisible.value = true;
};

// 单个发货
const handleDelivery = (record) => {
  isMultiple.value = false;
  deliveryForm.expressCompany = "";
  deliveryForm.expressNo = "";
  deliveryForm.remark = "";
  deliveryVisible.value = true;
};

// 确认发货
const handleDeliveryConfirm = () => {
  if (!deliveryForm.expressCompany) {
    Message.error("请选择快递公司");
    return;
  }

  if (isMultiple.value) {
    if (!deliveryForm.expressNos) {
      Message.error("请输入快递单号");
      return;
    }
    // TODO: 调用批量发货API
    Message.success("批量发货成功");
  } else {
    if (!deliveryForm.expressNo) {
      Message.error("请输入快递单号");
      return;
    }
    // TODO: 调用发货API
    Message.success("发货成功");
  }

  deliveryVisible.value = false;
  handleSearch();
};

// 查看详情
const handleDetail = (record) => {
  router.push({
    name: "MerchantOrderDetail",
    params: { id: record.id },
  });
};
</script>

<style lang="scss" scoped>
.delivery-page {
  .page-header {
    @apply flex items-center justify-between mb-6;

    h2 {
      @apply text-xl font-medium mb-1;
    }

    .subtitle {
      @apply text-gray-500 text-sm;
    }
  }

  .search-form {
    @apply mb-4;
  }

  .table-toolbar {
    @apply flex justify-between items-center mb-4;
  }

  .product-info {
    @apply flex items-center;

    .product-detail {
      @apply ml-3;

      .product-name {
        @apply font-medium mb-1;
      }

      .product-specs {
        @apply text-gray-500 text-sm;
      }
    }
  }

  .receiver-info {
    .name {
      @apply font-medium mb-1;
    }

    .phone {
      @apply text-gray-500 text-sm mb-1;
    }

    .address {
      @apply text-gray-500 text-sm break-all;
    }
  }
}
</style>
